<template>
    <!-- 企业资料 -->
    <div class="container">
        <div class="content">
            <div class="small-title">
                <div></div>
                <span>企业资料</span>
            </div>
            <div class="children">
                <div class="title">
                    <el-image class="img" :src="value.logo">
                        <div slot="placeholder">
                            加载中<span class="dot">...</span>
                        </div>
                    </el-image>
                    <span>{{ value.name }}</span>
                </div>
                <div class="info">
                    <span class="name">合同编号：</span>
                    <span class="num">XS1212112311</span>
                    <a href="javascript:void(0)" target="_blank" class="name down">点击下载</a>
                    <span class="time">合同期限：2020-12-12</span>
                </div>
            </div>
            <el-form :model="value" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
                <div class="small-title">
                    <div></div>
                    <span>联系人信息</span>
                </div>
                <div class="children">
                    <el-form-item label="姓名：" prop="contactName">
                        <el-input v-model="value.contactName" :style="{ width: '380px' }" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="手机：" prop="contactMobile">
                        <el-input v-model.number="value.contactMobile" :style="{ width: '380px' }" maxlength="11" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="固定电话：" prop="supportPhone">
                        <el-input v-model="value.supportPhone" :style="{ width: '380px' }" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱：" prop="contactEmail">
                        <el-input v-model="value.contactEmail" :style="{ width: '380px' }" disabled></el-input>
                    </el-form-item>
                </div>
                <div class="small-title">
                    <div></div>
                    <span>公司信息</span>
                </div>
                <div class="children">
                    <el-form-item label="品牌：" prop="brandName">
                        <el-input v-model="value.brandName" :style="{ width: '380px' }" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称：" prop="name">
                        <el-input v-model="value.name" :style="{ width: '380px' }" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址：" prop="companyAddress">
                        <el-input v-model="value.companyAddress" :style="{ width: '380px' }" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="经营范围：" prop="businessScope">
                        <el-input v-model="value.businessScope" :style="{ width: '380px' }" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="合作产品说明：" prop="description">
                        <el-input type="textarea" v-model="value.description" :style="{ width: '380px' }" :rows="4" resize="none" maxlength="100" disabled></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div class="small-title">
                <div></div>
                <span>资质信息</span>
            </div>
            <div class="children flex-center">
                <div class="flex-colunm">
                    <div>
                        <span class="red">*</span>
                        <span class="name license">营业执照号：</span>
                        <span class="name">{{ value.businessLicenseNo || '' }}</span>
                    </div>
                    <el-image class="photo" :src="value.supportName">
                        <div slot="placeholder">
                            加载中<span class="dot">...</span>
                        </div>
                    </el-image>
                    <div class="k-height"></div>
                </div>
                <div>
                    <div class="id">
                        <span class="red">*</span>
                        <span class="name">法人身份证：</span>
                    </div>
                    <div class="flex-center">
                        <div class="flex-colunm front">
                            <el-image class="photo" :src="value.idCardFront">
                                <div slot="placeholder">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                            <span class="name">正面</span>
                        </div>
                        <div class="flex-colunm">
                            <el-image class="photo" :src="value.idCardReverse">
                                <div slot="placeholder">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                            <span class="name">反面</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { userEnterpriseInfo } from '@/api/sys/store'
export default {
    data() {
        return {
            value: {
                contactName: '',
                contactMobile: '', 
                supportPhone: '', 
                contactEmail: '',
                brandName: '', 
                name: '',
                companyAddress: '',
                businessScope: '',
                description: '',
                businessLicenseNo: '',
                supportName: '',
                idCardFront: '',
                idCardReverse: '',
                logo: '',
            },
            rules: {
                contactName: [{ required: true }],
                contactMobile: [{required: true }],
                supportPhone: [{required: true }],
                contactEmail: [{required: true }],
                brandName: [{ required: true }],
                name: [{ required: true }],
                companyAddress: [{ required: true }],
                businessScope: [{ required: true }],
                description: [{ required: true }],
                businessLicenseNo: [{ required: true }],
            }
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            userEnterpriseInfo().then(res => {
                if (res.code == 200) {
                    this.value = res.data
                }
            })
        }
    }
}
</script>

<style scoped>
.content {
    width: 100%;
    overflow: hidden;
}
.small-title {
    display: flex;
    align-items: center;
    margin: 8px 0 20px;
}
.small-title>div {
    width: 4px;
    height: 24px;
    background-color: #4787F8;
    border-radius: 0px 2px 2px 0px;
    margin-right: 12px;
}
.children {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}
.title {
    display: flex;
    align-items: center;
}
.title>span {
    font-size: 24px;
    color: #333;
    font-weight: bold;
}
.info {
    margin-top: 20px;
    margin-left: 400px;
}
.img {
    margin-right: 30px;
    width: 72px;
    height: 72px;
    border-radius: 8px;
}
.name {
    color: #333;
    font-size: 14px;
}
.num {
    font-weight: bold;
    color: #4787F8;
    font-size: 14px;
}
.down {
    margin-left: 16px;
    text-decoration: underline; 
}
.time {
    margin-left: 160px;
    font-size: 14px;
    color: #999;
}
.flex-center {
    display: flex;
    align-items: center;
    flex-direction: row;
}
.flex-colunm {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.red {
    font-size: 14px;
    color: #EF2A2A;
}
.photo {
    width: 196px;
    height: 146px;
    border-radius: 6px;
    margin: 16px 0;
}
.k-height {
    height: 16px;
}
.children>.flex-colunm {
    margin-right: 120px;
}
.license {
    margin-right: 16px;
}
.front {
    margin-right: 60px;
}
.id {
    margin-left: -16px;
}
.children>>>.el-input.is-disabled .el-input__inner {
    cursor: default;
}
</style>